<template>
  <div class="orgedit">
    <el-scrollbar>
      <!-- height="300px" -->
      <el-form
        ref="orgForm"
        class="orgForm"
        :model="pageData.formData"
        :rules="pageData.formRules"
        status-icon
        label-width="80px"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="编号：" prop="fcode">
              <el-input
                v-model="pageData.formData.fcode"
                placeholder="请输入编号"
                :disabled="!pageData.isAdd"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称：" prop="fname">
              <el-input
                v-model="pageData.formData.fname"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类别：" prop="funittypeid">
              <el-select
                v-model="pageData.formData.funittypeid"
                placeholder="请选择类别"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.orgTypeEnumArr.filter(
                    (p) => p.value > -1
                  )"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="负责人：" prop="fmanager">
              <el-input
                v-model="pageData.formData.fmanager"
                placeholder="请输入负责人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="电话：" prop="ftel">
              <el-input
                v-model="pageData.formData.ftel"
                placeholder="请输入电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序：" prop="forder">
              <el-input-number
                v-model="pageData.formData.forder"
                :min="1"
                :step="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="fremark">
              <el-input
                v-model="pageData.formData.fremark"
                placeholder="请输入备注"
                type="textarea"
                :rows="2"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-button @click="onHandleCancel">取 消</el-button>
        <el-button type="primary" @click="onHandleSure">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import utils from "@/common/utils";
import enums from "@/common/enums";
const lodash = require("lodash");

import { createOrg, updateOrg } from "@/api/system";

export default {
  name: "OrgEdit",
  components: {},
  props: {
    orgObj: { type: Object, required: true },
    isAdd: { type: Boolean, required: true, default: false },
  },
  setup(props, context) {
    onMounted(() => {
      if (props.isAdd) {
        pageState.pageData.formData = {
          forgid: "",
          fcode: "",
          finsidecode: "",
          fname: "",
          faboveid: props.orgObj.forgid,
          fmentorgid: "",
          funittypeid: 0,
          fmanager: "",
          fmanagerid: "",
          ftel: "",
          forder: 1,
          fremark: "",
          state: enums.StateEnum.Enable.value,
        };
      } else pageState.pageData.formData = lodash.cloneDeep(props.orgObj);
    });

    const orgForm = ref();
    const pageState = reactive({
      pageData: {
        permissions: {
          Add: utils.checkPermission("orginfo_add"),
          Edit: utils.checkPermission("orginfo_edit"),
        },
        orgTypeEnumArr: enums.OrgTypeEnum.getObjArray(),
        formData: {},
        formRules: {
          fcode: [{ required: true, message: "请输入编号", trigger: "blur" }],
          fname: [{ required: true, message: "请输入名称", trigger: "blur" }],
          funittypeid: [
            { required: true, message: "请输入类别", trigger: "blur" },
          ],
          forder: [{ required: true, message: "请输入排序", trigger: "blur" }],
        },
        isAdd: props.isAdd,
        keyId: props.orgObj.forgid,
      },
    });
    const pageFunc = {
      onHandleCancel: () => {
        orgForm.value?.resetFields();
        context.emit("cancel");
      },
      onHandleSure: () => {
        orgForm.value?.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            if (pageState.pageData.isAdd) {
              // 新增接口  测试通过
              createOrg(pageState.pageData.formData)
                .then((ret) => {
                  console.log("新增返回的数据", ret);
                  loading.close();
                  context.emit("ok", {
                    isAdd: pageState.pageData.isAdd,
                    keyId: pageState.pageData.keyId,
                    retObj: pageState.pageData.formData,
                  });
                  ElMessage.success("新增成功");
                })
                .catch((error) => {
                  console.log("first", error);
                  if (error.message === "数据库已存在重复数据") {
                    loading.close();
                    ElMessage.error("组织机构编码重复，请重新输入");
                  } else {
                    loading.close();
                    ElMessage.error(error.message || "请求出错");
                  }
                });
            } else {
              updateOrg(pageState.pageData.formData)
                .then((ret) => {
                  console.log("编辑弹窗提交返回的数据", ret);
                  loading.close();
                  context.emit("ok", {
                    isAdd: pageState.pageData.isAdd,
                    keyId: pageState.pageData.keyId,
                    retObj: pageState.pageData.formData,
                  });
                })
                .catch((error) => {
                  console.log("object", error);
                  loading.close();
                  ElMessage.error(error.message || "请求出错");
                });
            }
          } else return false;
        });
      },
    };

    return {
      orgForm,
      ...toRefs(pageState),
      ...pageFunc,
    };
  },
};
</script>

<style lang="scss">
.orgedit {
  height: 100%;
  background-color: white;
  .orgForm {
    width: calc(100% - 6px);
  }
}
</style>
